<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <div th:replace="common/common :: headblock('WEBSSH')"></div>
  <!--  引入自定义CSS -->
  
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <div th:replace="common/common :: main-header"></div>
  
  <!-- Left side column. contains the logo and sidebar -->
  <div th:replace="common/common :: main-sidebar"></div>
  
        <div class="content-wrapper">
            <hr>
             <iframe scrolling="yes" frameborder="0" style="width:100%;min-height:600px;overflow:visible;background:#fff;" src="/webssh/websshpage.html">
             </iframe>
        </div>

  <!-- Main Footer -->
  <div th:replace="common/common :: main-footer"></div>

  <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- 引入通用javaScript -->
<div th:replace="common/common :: commonfooterjs"></div>
<!--  引入自定义javaScript -->
<!--  引入自定义javaScript -->
<script src="/jslib/xtermjs/xterm.js" charset="utf-8"></script>
<!-- 自定义js -->
<script src="/js/webssh/webssh.js" charset="utf-8"></script>

<script th:inline="javascript">
    
    function connectFunction() {
        $("#terminal").empty();
        let ipaddr = $("#ipaddr").val();
        let port = $("#port").val();
        let username = $("#username").val();
        let password = $("#password").val();
        
        $("#ipaddr").val("");
        $("#port").val("");
        $("#username").val("");
        $("#password").val("");
        
        openTerminal({operate:'connect',
            host: ipaddr,//IP
            port: port,//端口号
            username: username,//用户名
            password: password //密码
        });
    };
    
    function disconnectFunction() {
        $("#terminal").empty();
    };
    
    function init() {
        $("#connectbtn").on("click", function(){
            connectFunction();
        });
        $("#disconnectbtn").on("click", function(){
            disconnectFunction();
        });
    };
    $(function(){
        init();
    });
    
    /*
     openTerminal( {
        operate:'connect',
        host: '101.132.190.132',//IP
        port: '33689',//端口号
        username: 'lenglingx',//用户名
        password: 'hnjt123456'//密码
    });
    */
    function openTerminal(options){
        var client = new WSSHClient();
        var term = new Terminal({
            cols: 97,
            rows: 27,
            cursorBlink: true, // 光标闪烁
            cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
            scrollback: 800, //回滚
            tabStopWidth: 8, //制表宽度
            screenKeys: true
        });

        term.on('data', function (data) {
            //键盘输入时的回调函数
            client.sendClientData(data);
        });
        term.open(document.getElementById('terminal'));
        //在页面上显示连接中...
        term.write('Connecting...');
        //执行连接操作
        client.connect({
            onError: function (error) {
                //连接失败回调
                term.write('Error: ' + error + '\r\n');
            },
            onConnect: function () {
                //连接成功回调
                client.sendInitData(options);
            },
            onClose: function () {
                //连接关闭回调
                term.write("\rconnection closed");
            },
            onData: function (data) {
                //收到数据时回调
                term.write(data);
            }
        });
    }
</script>
</body>
</html>